<template>
  <q-dialog v-model="show" persistent>
    <q-card class="dialog-content" style="min-width: 1000px; max-height: 800px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <span class="font-size-16" v-if="type == 'defective'">
            不良数量（{{count}}）
          </span>
          <span v-else-if="type == 'compromise'">
            让步数量（{{count}}）
          </span>
        </div>
        <q-btn
          style="font-size: 18px;color: white"
          flat round dense
          class="iconfont icontubiao-67 white close-btn dialog"
          @click="$emit('close')"
        />
      </q-card-section>
      <q-table
        :data="tableData" :columns="defectiveColumns"
        row-key="id" class="myTable scroll"
        :pagination.sync="pagination" hide-bottom
        no-data-label="暂无数据"
        color="primary"
        style="margin: 0;max-height: 500px"
        v-if="type == 'defective'"
      >
        <template v-slot:body-cell-indexId="props">
          <q-td style="width: 80px">{{props.row.indexId + 1}}</q-td>
        </template>
      </q-table>
      <q-table
        :data="tableData" :columns="compromiseColumns"
        row-key="id" class="myTable scroll"
        :pagination.sync="pagination" hide-bottom
        no-data-label="暂无数据"
        color="primary"
        style="margin: 0;max-height: 500px"
        v-else-if="type == 'compromise'"
      >
        <template v-slot:body-cell-indexId="props">
          <q-td style="width: 80px">{{props.row.indexId + 1}}</q-td>
        </template>
      </q-table>
    </q-card>
  </q-dialog>
</template>

<script>
import { getQualityCauses } from '../../../boot/job/quality-order'

export default {
  name: 'defective-list',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    type: {
      type: String,
      default: '',
      required: true
    },
    count: {
      default: '',
      required: true
    },
    id: {
      default: '',
      required: true
    }
  },
  data () {
    return {
      // 不良表格头部数据
      defectiveColumns: [
        { name: 'indexId', label: '序号', field: 'indexId', align: 'left' },
        { name: 'shifts', label: '加工班次', field: 'shiftsName', align: 'left' },
        { name: 'gid', label: '不良类型', field: 'gidName', align: 'left' },
        { name: 'defective', label: '不良原因', field: 'causeName', align: 'left' },
        { name: 'op', label: '操作人', field: 'name', align: 'left' },
        { name: 'count', label: '数量', field: 'count', align: 'left' }
      ],
      // 让步表格头部数据
      compromiseColumns: [
        { name: 'indexId', label: '序号', field: 'indexId', align: 'left' },
        { name: 'shifts', label: '加工班次', field: 'shiftsName', align: 'left' },
        { name: 'defective', label: '让步原因', field: 'causeName', align: 'left' },
        { name: 'name', label: '操作人', field: 'name', align: 'left' },
        { name: 'count', label: '数量', field: 'count', align: 'left' }
      ],
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      tableData: [] // 表格数据
    }
  },
  methods: {
    // 获取不良/让步详细
    getQualityCauses () {
      const params = {
        id: this.id,
        isCompromiseCause: this.type === 'compromise'
      }
      getQualityCauses(params).then(res => {
        res.data.forEach((row, index) => {
          row.indexId = index
        })
        this.tableData = res.data
        // console.log(res)
      })
    }
  },
  watch: {
    show () {
      this.getQualityCauses()
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
